<template>
  <div class="question-panel" v-show="value.questionTypeName">
    <div class="caption">
      <span class="text_color_429688">{{(curIndex+1)+'、'+value.questionTypeName}}</span>
      <span v-text="value.questionStemText" class="title"></span>
    </div>
    <ul class="answer">
      <el-radio-group
        v-if="value.questionType===3 || value.questionType===0"
        v-model="value.selectedAnswer"
      >
        <li v-for="p in value.questionOptionList" :key="p.optionId">
          <el-radio :label="p.optionId" :disabled="!showInput">
            <pre v-html="(p.questionType!==3? p.optionLabel+'&nbsp;':'')+p.optionContent"></pre>
          </el-radio>
        </li>
      </el-radio-group>
      <el-checkbox-group v-if="value.questionType===1" v-model="value.selectedAnswer">
        <li v-for="p in value.questionOptionList" :key="p.optionId">
          <el-checkbox :label="p.optionId" :disabled="!showInput">
            <pre v-html="(p.questionType!==3? p.optionLabel+'&nbsp;':'')+ p.optionContent"></pre>
          </el-checkbox>
        </li>
      </el-checkbox-group>
      <div v-if="value.questionType===2" class="form-input-panel">
        <div class="item" v-for="(p,index) in value.questionOptionList" :key="p.optionId">
          <label v-text="(index+1)" class="text_color_429688"></label>
          <el-input type="textarea" :readonly="!showInput" autosize v-model="p.answerContent"></el-input>
        </div>
      </div>
    </ul>
    <div class="question-resolution" v-if="!showInput">
      <div class="desc">
        <div>
          <p>考生答案</p>
          <p
            class="value text_color_error"
            v-text="value.userAnswer?value.userAnswer.replace('真','对').replace('假','错'):''"
          ></p>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div>
          <p>正确答案</p>
          <p
            class="value text_color_429688"
            v-text="value.trueAnswer?value.trueAnswer.replace('真','对').replace('假','错'):''"
          ></p>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div>
          <p>分数</p>
          <p
            class="value text_color_429688"
          >{{(value.isTrue?value.userScore:0)+'/'+value.questionScore}}分</p>
        </div>
      </div>
      <div class="resolution">
        <p>试题解析：</p>
        <div v-html="value.questionAnalysis"></div>
      </div>
    </div>
    <div class="footer">
      <el-button type="primary" size="small" :disabled="curIndex===0" plain @click="pre">上一题</el-button>
      <el-button type="primary" size="small" :disabled="isLast" plain @click="next">下一题</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'QuestionDetailInfo',
  props: {
    value: {
      type: Object,
      default() {
        return {}
      }
    },
    curIndex: {
      type: Number,
      default: 0
    },
    isLast: {
      type: Boolean,
      default: false
    },
    showInput: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  methods: {
    pre() {
      this.$emit('pre')
    },
    next() {
      this.$emit('next')
    }
  }
}
</script>
<style lang="less">
.question-panel {
  .caption {
    .title {
      margin-left: 5px;
    }
  }

  .form-input-panel {
    .item {
      display: flex;
      padding: 5px;
      align-items: center;

      label {
        display: flex;
        border: solid 1px #cb2c21;
        padding: 5px;
        width: 0.6vw;
        height: 0.6vw;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
      }

      .el-textarea .el-textarea__inner {
        border-left: none;
        border-top: none;
        border-right: none;
        font-size: 13px;
      }
    }
  }

  .question-resolution {
    margin-top: 2vw;
    margin-bottom: 2vw;
    margin-left: 2em;

    .desc {
      display: flex;
      height: 50px;
      color: #666666;
      font-size: 12px;
      text-align: center;
      align-items: center;

      p {
        height: 25px;
      }

      .value {
        font-size: 14px;
      }
      .el-divider--vertical {
        height: 100%;
        margin: 0 3vw;
      }
    }

    .resolution {
      display: flex;
      margin-top: 2vw;
      color: #999999;
      p {
        padding: 0px;
        display: flex;
        margin: 0px;
        font-size: 12px;
      }
      div {
        font-size: 12px;
      }
    }
  }

  .el-radio__label,
  .el-checkbox__label {
    pre {
      display: inline-flex;
    }
  }
}
</style>